<template>
    <div id="img"></div>

    <div id="box">
        <span style="font-size: 22px;color: #333;">个人中心</span><br>
        <span style="color: #999;font-size: 15px;border-bottom: 3px solid red;padding-bottom: 10px;">
            Personal information
        </span>
    </div>


    <div id="hello">
        <p>Hello鸭！{{ userInfoStore.userInfo.name }},今天是您来到妆造馆的<span>{{ day }}</span>天!</p>
    </div>

    <div style="width: 800px;margin: 60px auto;">
        <!-- 卡片 -->
        <el-card>
            <!---具名 slot-->
            <template #header>
                <div>
                    <span>基本资料</span>
                </div>
            </template>

            <el-row>
                <el-col :span="14">
                    <el-form :model="userInfo" :rules="rules" label-width="100px" size="large" style="margin: 0px auto;">
                        
                        <el-form-item label="用户昵称" prop="name">
                            <el-input v-model="userInfo.name"></el-input>
                        </el-form-item>
                        <el-form-item label="联系方式">
                            <el-input v-model="userInfo.phone" disabled></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="updateUser">提交修改</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { userPiniaInfo } from '@/stores/userPinia';
import apiUser from '@/api/user';
import { ElMessage } from 'element-plus';
const userInfoStore = userPiniaInfo();
//定义数据模型
const userInfo = ref({ ...userInfoStore.userInfo })



//参数校验
const rules = {
    name: [
        { required: true, message: '请输入用户昵称', trigger: 'blur' },
        {
            pattern: /^\S{1,10}$/,
            message: '昵称必须是1-10为的非空字符',
            trigger: 'blur'
        }
    ],
}

const day = computed(() => {
    // 将给定的时间字符串转换为日期对象
    const userInfoTime = new Date(userInfo.value.time);
    // 获取当前日期（这里简化使用硬编码的2024-12-18，实际中可以获取当前真实日期）
    const currentDate = new Date();
    // 计算时间差，单位为毫秒
    const diffInMilliseconds = currentDate - userInfoTime;
    // 将毫秒转换为天数
    const diffInDays = Math.floor(diffInMilliseconds / (1000 * 60 * 60 * 24));
    return diffInDays
})


const updateUser = () =>{
    apiUser.updateUserName(userInfo.value).then( (res)=>{
        if(res.data.code == 0){
            //更新pinia中的个人信息
            //创建一个新的对象，这样有一个新的引用 绝对会更新
            userInfoStore.setuserPinia({...userInfo.value});
            ElMessage.success("修改成功！")
        }
    })
}
</script>
<style scoped>
#box {
    text-align: center;
    height: auto;
    margin-top: 50px
}


#hello p{
    font-family: 'LobsterTwo', cursive; 
    color: #7aadff;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); 
    font-size: 20px;
}
#hello p span{
    font-weight: bold;
    font-size: 35px;
}
#hello{
    margin-top: 30px;
    margin-left: 570px;
}

#img {
    background-image: url("../../images/user-head.jpg");
    background-size: contain;
    background-repeat: repeat;
    background-position: center;
    height: 570px;
    width: 100%;
}
</style>